<template>
  <div class="content-area">
    <DeviceControls @switch-device="switchDevice" class="devicePanel" />
    <div class="main-content-panels">
      <LeftPanel :currentDevice="currentDevice" :sensorPoints="currentDeviceSensorPoints" />
      <RightPanel :currentDevice="currentDevice" :deviceInfo="currentDeviceInfo" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import DeviceControls from '../components/AnomalyDetection/DeviceControls.vue'
import LeftPanel from '../components/AnomalyDetection/LeftPanel.vue'
import RightPanel from '../components/AnomalyDetection/RightPanel.vue'

// 静态设备数据（除了从后端获取的部分）
// 这部分数据可以考虑从一个独立的配置文件或API获取，这里为了演示先写死
const deviceData = {
  联醇装置: {
    image: '/img/device.png',
    info: `
      <p><strong>装置名称:</strong> 联醇装置</p>
      <p><strong>负责人:</strong> 张三</p>
      <p><strong>今日能耗:</strong> 1500 kWh (较昨日 +5%)</p>
      <p><strong>运行状态:</strong> 稳定运行</p>
      <p><strong>上次维护:</strong> 2024-03-10</p>
      <p><strong>当前环境温度:</strong> 25°C</p>
      <p><strong>系统版本:</strong> V2.1.0</p>
    `,
    sensorPoints: [
      // 联醇装置的传感器坐标
      { id: 'FIC1007', top: '35.4%', left: '41.5%', category: 'main' },
      { id: 'FIC1001A', top: '81.1%', left: '36.5%', category: 'relative' },
      // { id: 3, top: '45%', left: '75%' }
    ],
  },
  解吸浓缩系统装置: {
    image: './img/device1.png',
    info: `
      <p><strong>装置名称:</strong> 解吸浓缩系统装置</p>
      <p><strong>负责人:</strong> 李四</p>
      <p><strong>今日能耗:</strong> 800 kWh (较昨日 -2%)</p>
      <p><strong>运行状态:</strong> 待机</p>
      <p><strong>上次维护:</strong> 2024-02-01</p>
      <p><strong>当前环境温度:</strong> 23°C</p>
      <p><strong>系统版本:</strong> V2.1.0</p>
    `,
    sensorPoints: [
      // 解吸浓缩系统装置的传感器坐标
      { id: 'TIC1008', top: '6%', left: '25.5%', category: 'main' },
      { id: 'TIC1008', top: '6%', left: '20.5%', category: 'relative' },
      { id: 'TIC2005', top: '6%', left: '30.5%', category: 'relative' },
      { id: 'TIC2005', top: '74%', left: '14%', category: 'relative' },
      { id: 'FI615', top: '41%', left: '89%' }, // 示例：不同的ID和位置
    ],
  },
}

const currentDevice = ref('联醇装置') // 默认选中设备

// 计算属性，根据当前选中的设备返回对应的传感器点和基础信息
const currentDeviceSensorPoints = computed(() => {
  return deviceData[currentDevice.value]?.sensorPoints || []
})

const currentDeviceInfo = computed(() => {
  return deviceData[currentDevice.value]?.info || ''
})

// 处理 DeviceControls 组件发出的设备切换事件
const switchDevice = (device) => {
  currentDevice.value = device
  // 当设备切换时，LeftPanel 和 RightPanel 会通过 props 自动更新
}

// 在组件挂载时，可以执行一些初始化操作，例如获取默认设备的数据
onMounted(() => {
  console.log('AnomalyDetectionView mounted, current device:', currentDevice.value)
  // 可以在这里触发获取初始数据，但由于子组件会监听currentDevice，所以不强制在这里做
})

// 监听 currentDevice 的变化，如果需要在此视图层面做额外处理可以添加 watch
watch(currentDevice, (newDevice) => {
  console.log('Device switched to:', newDevice)
  // 这里可以添加逻辑，例如重新加载与设备相关的其他数据或状态
})
</script>

<style scoped>
.main-content-panels {
  display: flex;
  gap: 20px;
  flex: 1; /* 让 main-content-panels 占据 content-area 的剩余空间 */
  /* 确保其子项（left-panel 和 right-panel）能基于此空间进行伸缩 */
}

/* Left Panel - 占据 3/5 空间 */
.left-panel {
  flex: 3; /* 调整为 3 */
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex; /* 使用 flex 布局，使其子项（特别是 img）能填充空间 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  overflow: hidden;
  position: relative;
  min-height: 0; /* 允许在 flex 容器中正确收缩，防止内容溢出 */
}

/* Right Panel - 占据 2/5 空间 */
.right-panel {
  flex: 2; /* 调整为 2 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0; /* 允许在 flex 容器中正确收缩，防止内容溢出 */
}

/* 确保 info-card 和 evaluation-card 能够占据 right-panel 的剩余空间 */
.info-card,
.evaluation-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1; /* 每个占据一半空间，或者根据需要调整为固定高度或不同比例 */
  overflow-y: auto;
  display: flex; /* 确保内部内容也使用 flex 布局 */
  flex-direction: column; /* 内容垂直排列 */
  min-height: 0; /* 防止内容溢出 */
}

/* 如果内容不足以撑开 evaluation-card，但仍需要它充满，确保 chart-container 有固定高度或flex */
.evaluation-card .chart-container {
  position: relative;
  height: 380px; /* 您已经设置了固定高度 */
  width: 100%;
  margin-top: 10px;
  flex-shrink: 0; /* 防止图表被压缩 */
}

/* 确保 info-content 的内容不会导致卡片溢出 */
.info-card .info-content {
  flex: 1; /* 让内容区域填充剩余空间 */
  overflow-y: auto; /* 如果内容过多，允许滚动 */
}

.device-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  /* 确保它不会被拉伸 */
  flex-shrink: 0; /* 防止在空间不足时收缩 */
  /* 如果需要固定宽度，可以添加，但通常不需要 */
  /* width: fit-content; */ /* 让宽度适应内容，这是其默认行为，通常不需要显式设置 */
  /* max-width: 100%; */ /* 限制最大宽度不超过父容器 */
}
</style>
